<template>
	<div id='XTRDchart0' style="width: 480px;height:320px;margin:0 auto;"></div>
</template>

<script>
import * as echarts from 'echarts'
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

import {GETSYSTEMHOT} from '@/../static/js/apis.js'

export default{
	name: "VueHotWordCloud",
	 data () {
        return {
        }
      },
	methods: {
		//绘制图形
		drawChart (data) {
			let myChart0 = echarts.init(document.getElementById('XTRDchart0'))
			let options =  {
            title: {
              text: "系统热度",
              x: "left"
            },
            tooltip: {
			        trigger: 'item'
	       },
            backgroundColor: "#fff",
            // tooltip: {
            //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
            // },
            series: [
              {
                type: "wordCloud",
                //用来调整词之间的距离
                gridSize: 10,
                //用来调整字的大小范围
                // Text size range which the value in data will be mapped to.
                // Default to have minimum 12px and maximum 60px size.
                sizeRange: [14, 60],
                // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                // rotationRange: [-45, 0, 45, 90],
                // rotationRange: [ 0,90],
                rotationRange: [0, 0],
                //随机生成字体颜色
                // maskImage: maskImage,
                textStyle: {
                    color: function() {
                      return (
                        "rgb(" +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ")"
                      )
                    }
                },
                //位置相关设置
                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                // Default to be put in the center and has 75% x 80% size.
                left: "center",
                top: "center",
                right: null,
                bottom: null,
                width: "100%",
                height: "100%",
                //数据
                data: data
              }
            ]
          };
			myChart0.setOption(options, true)
		},
		getData () {
			const self = this;
        let  worddata=[];
			GETSYSTEMHOT('',function(res){
				if(res.data){
               res.data.forEach(function(item, index) {
                  let  obj={};
                  obj.name=item.sysName
                  obj.value=item.visit
                  worddata.push(obj)
              })
					//绘制图形
					self.drawChart(worddata);
				}
			})
		}
	},
	mounted () {
		this.getData();
	}
}

</script>

<style scoped>

</style>
